<template>
  <div class="box">
    <div class="big" v-if="!isShow">
      <input class="txt" placeholder="写评论" @focus="Show" v-model="inputVal" />
      <div class="one">
        <span class="iconfont iconpinglun-"></span>
        <div>{{commentss.index}}</div>
      </div>
      <span class="two iconfont iconshoucang" :class="{arr:commentss.star}" @click="add"></span>
      <span class="three iconfont iconfenxiang" @click="showShare = true"></span>
    </div>

    <div class="small" v-if="isShow">
      <textarea
        ref="textarea"
        @blur="isShowChange"
        v-model="inputVal"
        :placeholder=" parentId.name ?'回复:'+ parentId.name : '' "
      ></textarea>
      <input type="button" value="发送" @click="send" />
    </div>

    <!-- 分享组件 -->
    <van-share-sheet
      v-model="showShare"
      title="立即分享给好友"
      :options="options"
      @select="onSelect"
    />
  </div>
</template>

<script>
export default {
  props: ["parentId",'commentss'],
  data() {
    return {
      isShow: false,
      inputVal: "",
      showShare:false,  //分享显示变量
      options: [
        { name: '微信', icon: 'wechat' },
        { name: '微博', icon: 'weibo' },
        { name: '复制链接', icon: 'link' },
        { name: '分享海报', icon: 'poster' },
        { name: '二维码', icon: 'qrcode' },
      ],
    };
  },
  methods: {
    Show() {
      //获取焦点函数
      this.isShow = true;

      // 2. 聚焦textarea
      // jq 一改 dom 页面就更新
      // vue 不一样, 会先执行完所有当前周期的代码
      // 再执行页面刷新
      // this.$refs.textarea.focus()
      // 马上执行focus 会获取不到
      // 2种方法
      // 最粗暴, 定时器
      // setTimeout(() => {
      //     this.$refs.textarea.focus()
      // }, 50);
      // 定时器, 使我们猜测的, 不知道是不是真的更新完
      // vue 提供的一个函数, 可以预定一个回调函数,
      // 在下次渲染完之后再执行
      this.$nextTick(() => {
        this.$refs.textarea.focus();
      });
    },
    send() {
      let data = {
        content: this.inputVal,
      };
      if (this.parentId.id) {
        data.parent_id = this.parentId.id;
      }
      this.$axios({
        url: "/post_comment/" + this.$route.params.id,
        method: "post",
        data,
      }).then((res) => {
        console.log(res);
        if (res.data.message == "评论发布成功") {
          this.$emit("CommentOnSuccess"); //返回一个函数方便页面做后续操作

          this.inputVal = ""; //清楚输入框内容
        }
      });
    },
    isShowChange() {  //失去焦点
      setTimeout(() => {
        this.isShow = false;

        this.parentId.id = "";
        this.parentId.name = "";
      });
    },

    onSelect(option) {  //分享点击
      this.$toast(option.name);
      this.showShare = false;
    },

    add(){
      console.log('收藏文章id'+ this.$route.params.id);
      this.$axios({
        url:'/post_star/'+ this.$route.params.id,
      }).then(res=>{
        console.log(res);
        if(res.data.message == "收藏成功"){
          this.$toast(res.data.message)
        }else if(res.data.message == "取消成功"){
          this.$toast('取消收藏')
        }
        console.log(this.commentss);
        this.$emit('CommentOnSuccess')
      })
    }
  },
};
</script>

<style lang="less" scoped>
.box {
  position: fixed;
  bottom: 0;
  width: 100%;
  .big {
    display: flex;
    justify-content: space-between;
    padding: 13/360 * 100vw;
    .txt {
      background-color: #dfdcdc;
      height: 32/360 * 100vw;
      width: 160/360 * 100vw;
      border-radius: 6/360 * 100vw;
      border: none;
      outline: none;
    }
    .one {
      position: relative;
      div {
        position: absolute;
        top: 0;
        right: -2vw;
        background-color: red;
        font-size: 13/360 * 100vw;
        border-radius: 6/360 * 100vw;
      }
    }
    .iconfont {
      font-size: 26/360 * 100vw;
      font-weight: bold;
      &.arr{
        color: rgb(243, 243, 76);
      }
    }
  }
  .small {
    padding: 13/360 * 100vw;
    display: flex;
    align-items: flex-end;
    textarea {
      height: 80/360 * 100vw;
      width: 230/360 * 100vw;
      padding: 5/360 * 100vw;
      box-sizing: border-box;
      border-radius: 8/360 * 100vw;
      outline: none;
      border: none;
      background-color: rgb(223, 223, 223);
    }
    input {
      outline: none;
      border: none;
      background: red;
      margin-left: 20/360 * 100vw;
      padding: 10/360 * 100vw;
      color: white;
      border-radius: 10/360 * 100vw;
    }
  }
}
</style>